<template>
	<view class="content">
		<view class="center uni-flex">
			<view class="logo uni-flex" @click="goLogin" :hover-class="'logo-hover'">
				<image class="logo-img" :src="user ? activeUrl : avatarUrl"></image>
				<view class="logo-title uni-flex">
					<text class="uer-name">Hi，{{user ? `${user.nickname} (${user.role_nickname})` : '您未登录'}}</text>
					<text class="go-login navigat-arrow" v-if="!user">></text>
				</view>
			</view>

			<view class="center-list uni-flex" v-if="user">
				<view class="center-list-item border-bottom uni-flex">
					<text class="list-text">所属系统：{{ user.company_parent }}</text>
				</view>
				<view class="center-list-item border-bottom uni-flex">
					<text class="list-text">单位名称：{{ user.company }}</text>
				</view>
			</view>

			<view class="center-list uni-flex">
				<view class="center-list-item border-bottom uni-flex">
					<text class="list-icon iconfont iconicon_dispose"></text>
					<text class="list-text" @click="go_setting_password">修改密码</text>
					<text class="navigate-arrow iconfont iconicon_next_arrow"></text>
				</view>
				<view class="center-list-item border-bottom uni-flex">
					<text class="list-icon iconfont iconicon_boss"></text>
					<text class="list-text" @click="go_setting_company"> 修改单位 </text>
					<text class="navigate-arrow iconfont iconicon_next_arrow"></text>
				</view>
			</view>
			<view style="padding:20upx" v-if="user">
				<button @click="user_logout" type="warn">退出</button>
			</view>

		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import * as API from 'server/getData'
	import * as types from 'store/mutations_types'
	export default {
		components: {
		},
		data() {
			return {
				avatarUrl: '/static/portrait.png',
				activeUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3914950518,3569645197&fm=27&gp=0.jpg'
			}
		},
		computed: {
			...mapState(['user', 'tabBar'])
		},
		onLoad() {
			if (this.user) {
				this.tabBar[this.user.role].forEach(e => {
					uni.setTabBarItem(e)
				})
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({ url: 'setting' });
			}
		},
		methods: {
			go_setting_company() {
				uni.navigateTo({ url: 'setting_company' })
			},
			go_setting_password() {
				uni.navigateTo({ url: 'setting' })
			},
			goLogin() {
				if (!this.user) {
					uni.reLaunch({url: 'login'});
				}
			},
			user_logout() {
				this.$store.commit(types.LOGOUT)
				console.log('123')
				uni.reLaunch({url: 'login'})
			}
		}
	}
</script>

<style>
.center {
	flex-direction: column;
}
.logo {
	width: 750upx;
	height: 240upx;
	padding: 20upx;
	box-sizing: border-box;
	background-color:#484b84;
	flex-direction: row;
	align-items: center;
}
.logo-img {
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
}
.logo-hover {
	opacity: 0.8;
}
.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #FFFFFF;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
}

.login-title {
	height: 150upx;
	align-items: self-start;
	justify-content: center;
	flex-direction: column;
	margin-left: 20upx;
}

.go-login.navigat-arrow {
	font-size: 38upx;
	color: #FFFFFF;
}
.center-list {
	background-color: #FFFFFF;
	margin-top: 20upx;
	width: 750upx;
	flex-direction: column;
}
.center-list-item {
	height: 90upx;
	width: 750upx;
	box-sizing: border-box;
	flex-direction: row;
	padding: 0upx 20upx;
}
.list-icon {
	width: 40upx;
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #FF80AB;
	text-align: center;
	font-family: texticons;
	margin-right: 20upx;
}
.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	flex: 1;
	text-align: left;
}
.navigate-arrow {
	height: 90upx;
	width: 40upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	text-align: right;
	font-family: texticons;
}
.border-bottom {
	border-bottom-width: 1upx;
	border-color: #c8c7cc;
	border-bottom-style: solid;
}
</style>
